<template>
  <div>
    <h1>app</h1>
    <h2>渲染string/number</h2>
    <p>当前计数为：{{ count }}</p>
    <button @click="increment">+1</button>

    <hr />
    <h2>条件渲染</h2>
    <button @click="toggle">toggle</button>
    <p :class="{ active: isActive }">active</p>

    <hr />
    <h2>渲染object</h2>
    <p>{{ obj }}</p>
    <p v-for="(value, key) in obj" :key="key">key为：{{ key }}----值为：{{ value }}</p>

    <hr />
    <h2>渲染array</h2>
    <p>{{ arr }}</p>
    <p v-for="(item, index) in arr" :key="index">{{ item }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// number
let count = ref(100)
// boolean
let isActive = ref(false)

// string
let name = ref('张三')
// object
const obj = ref({
  name: '张三',
  age: 18,
  gender: '男'
})

// array
const arr = ref(['张三', '李四', '王五'])

const increment = () => {
  count.value++
  console.log(count.value)
}

const toggle = () => {
  isActive.value = !isActive.value
}

// 修改obj的数据
setTimeout(() => {
  obj.value.name = '李四'
}, 2000)

// 添加数组
setTimeout(() => {
  // arr.value.push('赵六')
  arr.value = [...arr.value, '赵六']
}, 3000)
// 删除数组
setTimeout(() => {
  arr.value.shift()
}, 4000)
</script>

<style lang="scss" scoped>
.active {
  background-color: red;
  color: pink;
}
</style>
